<template>
  <div class="box">
    <h5>子组件</h5>
    <p>msg:{{ msg }}</p>
    <input type="text" v-model="msg" />
    <p>num:{{ num }}</p>
    <input type="text" v-model.number="num" />
    <input type="text" v-model.number="newNum" />

    <p>arr:{{ arr }}</p>
    <input type="text" v-model="arr[0]" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "哈哈哈",
      num: 100,
      arr: [1, 2, 3, 4, 5],
    };
  },
  watch: {
    msg(nv) {
      this.$emit("updateMsg", nv);
    },
  },
  computed: {
    newNum: {
      get() {
        return this.num;
      },
      set(nv) {
        this.num = nv;
        this.$emit("updateNum", this.num);
      },
    },
  },
  created() {
    // 当前组件的数据已经构建完成
    // 传递构建完成的数据
    console.log(this); // 当前组件的vue对象
    // 在当前vue对象中，存在一个 _events 对象，记录了绑定的子组件的自定义事件
    // console.log(this._events.updateMsg[0]);
    // this._events.updateMsg[0](this.msg);
    this.$emit("updateMsg", this.msg);
    this.$emit("updateArr", this.arr);
    this.$emit("updateNum", this.num);
  },
};
</script>
